<template>
	<view>
		<u-tabbar :value="value" :safeAreaInsetBottom="false">
			<u-tabbar-item text="工作圈" @click="goJumpTo('pages/watermarkCamera/myTeam')">
				<template #active-icon>
					<image  class="TabItemICon" src="../../static/icon/gzqBlue.svg"></image>
				</template>
				<template #inactive-icon>
					<image class="TabItemICon" src="../../static/icon/gzq.svg"></image>
				</template>
			</u-tabbar-item>
			<u-tabbar-item text="群聊" @click="goJumpTo('pages/chat/list/index')">
				<template #active-icon>
					<image class="TabItemICon" src="../../static/icon/MessageBlue.svg"></image>
				</template>
				<template #inactive-icon>
					<image class="TabItemICon" src="../../static/icon/message.svg"></image>
				</template>
			</u-tabbar-item>
			<u-tabbar-item text="团队成员" @click="goJumpTo('pages/watermarkCamera/members')">
				<template #active-icon>
					<image class="TabItemICon" src="../../static/icon/MyBlue.svg"></image>
				</template>
				<template #inactive-icon>
					<image class="TabItemICon" src="../../static/icon/my.svg"></image>
				</template>
			</u-tabbar-item>
			<u-tabbar-item text="管理">
				<template #active-icon>
					<image  class="MyTabItenIcon" src="../../static/icon/setBlue.svg"></image>
				</template>
				<template #inactive-icon>
					<image class="MyTabItenIcon" src="../../static/icon/set.svg"></image>
				</template>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name: 'CameraTabbar',
		props: {
			value: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				height: 0,
				show: false,
			};
		},
		mounted() {
		},
		methods: {
			goJumpTo(link) {
				let pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route;
				if(link == currentRoute) return;
				
				// 跳转页面
				uni.switchTab({
					url: `/${link}`,
					fail() {
						uni.redirectTo({
							url: `/${link}`
						})
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tabbar-icon {
		padding-top: 3px;
		width: 1rem;
		height: 1rem;
	}
  // 消息图标
  .TabItemICon{
    padding-top: 3px;
    width: 1.2rem;
    height: 1.2rem;
  }
  // 我的图标
  .MyTabItenIcon{
    //padding-top: 3px;
    width: 1.5rem;
    height: 1.5rem;
  }
	.menu-container {
		padding: 0 20rpx;
	}
	.menu-card {
		margin-top: 24rpx;
		 background-color: #fff;
		 border-radius: 16rpx;
		 padding: 20rpx;
		 .card-title {
			 font-size: 28rpx;
			 font-weight: 550;
			 margin-bottom: 18rpx;
		 }
		 .card-menu {
			 display: flex;
			 flex-wrap: wrap;
		 }
		 .work-space .menu-item {
			 margin-bottom: 24rpx;
		 }
		 .menu-item {
			 text-align: center;
			 font-size: 24rpx;
			 width: 25%;
			 image {
				 width: 86rpx;
				 height: 86rpx;
			 }
		 }
	}


</style>
